<template>
  <div ref="dom" class="charts chart-map" style="height:1000px;width:1920px"></div>
</template>

<script>
import * as echarts from "echarts";
// import 'echarts/map/js/world'; // 引入组件
import tdTheme from "./theme.json";
// import { on, off } from '@/libs/tools';
import '../../js/world.js'
// echarts.registerTheme('tdTheme', tdTheme);

export default {
  name: "ChartWorldMap",
  props: {
    value: Array,
    max: String,
    title: Object,
    subtext: String,
    legend: Object,
    series: Array,
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
  },
  data() {
    return {
      dom: null,
      geoCoordMap: {
        Afghanistan: [67.709953, 33.93911],
        Angola: [17.873887, -11.202692],
        Albania: [20.168331, 41.153332],
        "United Arab Emirates": [53.847818, 23.424076],
        Argentina: [-63.61667199999999, -38.416097],
        Armenia: [45.038189, 40.069099],
        "French Southern and Antarctic Lands": [69.348557, -49.280366],
        Australia: [133.775136, -25.274398],
        Austria: [14.550072, 47.516231],
        Azerbaijan: [47.576927, 40.143105],
        Burundi: [29.918886, -3.373056],
        Belgium: [4.469936, 50.503887],
        Benin: [2.315834, 9.30769],
        "Burkina Faso": [-1.561593, 12.238333],
        Bangladesh: [90.356331, 23.684994],
        Bulgaria: [25.48583, 42.733883],
        Bahamas: [-77.39627999999999, 25.03428],
        "Bosnia and Herzegovina": [17.679076, 43.915886],
        Belarus: [27.953389, 53.709807],
        Belize: [-88.49765, 17.189877],
        Bermuda: [-64.7505, 32.3078],
        Bolivia: [-63.58865299999999, -16.290154],
        Brazil: [-51.92528, -14.235004],
        Brunei: [114.727669, 4.535277],
        Bhutan: [90.433601, 27.514162],
        Botswana: [24.684866, -22.328474],
        "Central African Republic": [20.939444, 6.611110999999999],
        Canada: [-106.346771, 56.130366],
        Switzerland: [8.227511999999999, 46.818188],
        Chile: [-71.542969, -35.675147],
        China: [104.195397, 35.86166],
        IvoryCoast: [-5.547079999999999, 7.539988999999999],
        Cameroon: [12.354722, 7.369721999999999],
        "Democratic Republic Congo": [21.758664, -4.038333],
        Congo: [15.827659, -0.228021],
        Colombia: [-74.297333, 4.570868],
        "Costa Rica": [-83.753428, 9.748916999999999],
        Cuba: [-77.781167, 21.521757],
        "Northern Cyprus": [33.429859, 35.126413],
        Cyprus: [33.429859, 35.126413],
        "Czech Republic": [15.472962, 49.81749199999999],
        Germany: [10.451526, 51.165691],
        Djibouti: [42.590275, 11.825138],
        Denmark: [9.501785, 56.26392],
        "Dominican Republic": [-70.162651, 18.735693],
        Algeria: [1.659626, 28.033886],
        Ecuador: [-78.18340599999999, -1.831239],
        Egypt: [30.802498, 26.820553],
        Eritrea: [39.782334, 15.179384],
        Spain: [-3.74922, 40.46366700000001],
        Estonia: [25.013607, 58.595272],
        Ethiopia: [40.489673, 9.145000000000001],
        Finland: [25.748151, 61.92410999999999],
        Fiji: [178.065032, -17.713371],
        "Falkland Islands": [-59.523613, -51.796253],
        France: [2.213749, 46.227638],
        Gabon: [11.609444, -0.803689],
        "United Kingdom": [-3.435973, 55.378051],
        Georgia: [-82.9000751, 32.1656221],
        Ghana: [-1.023194, 7.946527],
        Guinea: [-9.696645, 9.945587],
        Gambia: [-15.310139, 13.443182],
        "Guinea Bissau": [-15.180413, 11.803749],
        "Equatorial Guinea": [10.267895, 1.650801],
        Greece: [21.824312, 39.074208],
        Greenland: [-42.604303, 71.706936],
        Guatemala: [-90.23075899999999, 15.783471],
        "French Guiana": [-53.125782, 3.933889],
        Guyana: [-58.93018, 4.860416],
        Honduras: [-86.241905, 15.199999],
        Croatia: [15.2, 45.1],
        Haiti: [-72.285215, 18.971187],
        Hungary: [19.503304, 47.162494],
        Indonesia: [113.921327, -0.789275],
        India: [78.96288, 20.593684],
        Ireland: [-8.24389, 53.41291],
        Iran: [53.688046, 32.427908],
        Iraq: [43.679291, 33.223191],
        Iceland: [-19.020835, 64.963051],
        Israel: [34.851612, 31.046051],
        Italy: [12.56738, 41.87194],
        Jamaica: [-77.297508, 18.109581],
        Jordan: [36.238414, 30.585164],
        Japan: [138.252924, 36.204824],
        Kazakhstan: [66.923684, 48.019573],
        Kenya: [37.906193, -0.023559],
        Kyrgyzstan: [74.766098, 41.20438],
        Cambodia: [104.990963, 12.565679],
        "South Korea": [127.766922, 35.907757],
        Kosovo: [20.902977, 42.6026359],
        Kuwait: [47.481766, 29.31166],
        Laos: [102.495496, 19.85627],
        Lebanon: [35.862285, 33.854721],
        Liberia: [-9.429499000000002, 6.428055],
        Libya: [17.228331, 26.3351],
        "Sri Lanka": [80.77179699999999, 7.873053999999999],
        Lesotho: [28.233608, -29.609988],
        Lithuania: [23.881275, 55.169438],
        Luxembourg: [6.129582999999999, 49.815273],
        Latvia: [24.603189, 56.879635],
        Morocco: [-7.092619999999999, 31.791702],
        Moldova: [28.369885, 47.411631],
        Madagascar: [46.869107, -18.766947],
        Mexico: [-102.552784, 23.634501],
        Macedonia: [21.745275, 41.608635],
        Mali: [-3.996166, 17.570692],
        Myanmar: [95.956223, 21.913965],
        Montenegro: [19.37439, 42.708678],
        Mongolia: [103.846656, 46.862496],
        Mozambique: [35.529562, -18.665695],
        Mauritania: [-10.940835, 21.00789],
        Malawi: [34.301525, -13.254308],
        Malaysia: [101.975766, 4.210484],
        Namibia: [18.49041, -22.95764],
        "New Caledonia": [165.618042, -20.904305],
        Niger: [8.081666, 17.607789],
        Nigeria: [8.675277, 9.081999],
        Nicaragua: [-85.207229, 12.865416],
        Netherlands: [5.291265999999999, 52.132633],
        Norway: [8.468945999999999, 60.47202399999999],
        Nepal: [84.12400799999999, 28.394857],
        "New Zealand": [174.885971, -40.900557],
        Oman: [55.923255, 21.512583],
        Pakistan: [69.34511599999999, 30.375321],
        Panama: [-80.782127, 8.537981],
        Peru: [-75.015152, -9.189967],
        Philippines: [121.774017, 12.879721],
        "Papua New Guinea": [143.95555, -6.314992999999999],
        Poland: [19.145136, 51.919438],
        "Puerto Rico": [-66.590149, 18.220833],
        "North Korea": [127.510093, 40.339852],
        Portugal: [-8.224454, 39.39987199999999],
        Paraguay: [-58.443832, -23.442503],
        Qatar: [51.183884, 25.354826],
        Romania: [24.96676, 45.943161],
        Russia: [105.318756, 61.52401],
        Rwanda: [29.873888, -1.940278],
        "Western Sahara": [-12.885834, 24.215527],
        "Saudi Arabia": [45.079162, 23.885942],
        Sudan: [30.217636, 12.862807],
        "South Sudan": [31.3069788, 6.876991899999999],
        Senegal: [-14.452362, 14.497401],
        "Solomon Islands": [160.156194, -9.64571],
        SierraLeone: [-11.779889, 8.460555],
        ElSalvador: [-88.89653, 13.794185],
        Somaliland: [46.8252838, 9.411743399999999],
        Somalia: [46.199616, 5.152149],
        Serbia: [21.005859, 44.016521],
        Suriname: [-56.027783, 3.919305],
        Slovakia: [19.699024, 48.669026],
        Slovenia: [14.995463, 46.151241],
        Sweden: [18.643501, 60.12816100000001],
        Swaziland: [31.465866, -26.522503],
        Syria: [38.996815, 34.80207499999999],
        Chad: [18.732207, 15.454166],
        Togo: [0.824782, 8.619543],
        Thailand: [100.992541, 15.870032],
        Tajikistan: [71.276093, 38.861034],
        Turkmenistan: [59.556278, 38.969719],
        "Timor-Leste": [125.727539, -8.874217],
        "Trinidad and Tobago": [-61.222503, 10.691803],
        Tunisia: [9.537499, 33.886917],
        Turkey: [35.243322, 38.963745],
        Tanzania: [34.888822, -6.369028],
        Uganda: [32.290275, 1.373333],
        Ukraine: [31.16558, 48.379433],
        Uruguay: [-55.765835, -32.522779],
        "United States": [-95.712891, 37.09024],
        Uzbekistan: [64.585262, 41.377491],
        Venezuela: [-66.58973, 6.42375],
        Vietnam: [108.277199, 14.058324],
        Vanuatu: [166.959158, -15.376706],
        "West Bank": [35.3027226, 31.9465703],
        Yemen: [48.516388, 15.552727],
        "South Africa": [22.937506, -30.559482],
        Zambia: [27.849332, -13.133897],
        Zimbabwe: [29.154857, -19.015438],
        Taiwan: [121.5635373935, 25.0373630708],
        "Hong Kong": [114.1746383836, 22.2906764785], //香港
        Shanghai: [121.4648, 31.2891],
      },
    };
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    intChart() {
      let that = this;
      let data = this.value;
	    console.log(data)
      var geoCoordMap = this.geoCoordMap,
        tmpArr = [],
        countryArr = [],
        currentCounty = "";
      for (var i in data) {
        var country = this.value[i].name;
        if (geoCoordMap[country] == undefined) {
          continue;
        }
        countryArr.push(country);
      }
      let countryArr_reverse = countryArr.reverse();
      currentCounty = countryArr_reverse[0]; // 当前国家
      var arr = [];
      for (let i = 0; i < countryArr_reverse.length; i++) {
        let tmp1 = countryArr_reverse[i];
        if (countryArr_reverse.length == 1) {
          tmpArr = [
            { name: tmp1, value: 9100 },
            { name: tmp1, value: 9100 },
          ];
          arr.push(tmpArr);
        } else {
          for (var j = i + 1; j < countryArr_reverse.length; j++) {
            var tmp2 = countryArr_reverse[j];
            if (tmp2 == tmp1) {
              tmpArr = [
                { name: tmp1, value: 9100 },
                { name: tmp1, value: 9100 },
              ];
              arr.push(tmpArr);
            } else {
              tmpArr = [
                { name: tmp1, value: 9100 },
                { name: tmp2, value: 9100 },
              ];
              arr.push(tmpArr);
              break;
            }
          }
        }
        // }
      }
      this.$nextTick(() => {
        var BJData = arr;
        var convertDataResult = [];
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord =
              dataItem.length > 1 ? geoCoordMap[dataItem[1].name] : "";
            if (fromCoord && toCoord) {
              res.push([
                {
                  coord: fromCoord,
                  value: 1,
                  lineStyle: {
                    // color: dataItem[0].name == currentCounty ? '#19be6b' : '#ed4014'
                    color:
                      dataItem[0].name == currentCounty ? "#13CD93" : "#f90",
                  },
                },
                {
                  coord: toCoord,
                },
              ]);
            } else {
              res.push([
                {
                  coord: fromCoord,
                  value: 1,
                  lineStyle: {
                    color:
                      dataItem[0].name == currentCounty ? "#13CD93" : "#f90",
                  },
                },
                {
                  coord: fromCoord,
                },
              ]);
            }
          }
          convertDataResult = res;
          return res;
        };

        var series = [];
        [[currentCounty, BJData]].forEach(function (item, i) {
          series.push(
            {
              name: "迁徙线",
              type: "lines",
              zlevel: 2,
              effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "arrow", //箭头图标
                symbolSize: 4, //图标大小
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              color: "rgba(68,107,255,.8)",
              lineStyle: {
                normal: {
                  width: 2, //尾迹线条宽度
                  opacity: 0.1, //尾迹线条透明度
                  curveness: 0.2, //尾迹线条曲直度
                },
              },
              data: convertData(item[1]),
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 5,
              rippleEffect: {
                period: 10,
                // color: '#0099FF',
                color: "#13CD93",
                brushType: "stroke", //波纹绘制方式 stroke, fill
              },
              label: {
                normal: {
                  show: true,
                  position: "right", //显示位置
                  offset: [10, -5], //偏移设置
                  formatter: "{b}", //圆环显示文字
                  fontWeight: "normal",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 14,
                  color: "#515a6e",
                },
                emphasis: {
                  show: true,
                },
              },
              symbol: "circle",
              symbolSize: function (val) {
                return 15;
              },
              itemStyle: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              data: item[1].map(function (dataItem, index) {
                try {
                  return {
                    name: dataItem[0].name,
                    value: geoCoordMap[dataItem[0].name].concat([
                      dataItem[0].value,
                    ]),
                    rippleEffect: {
                      color:
                        dataItem[0].name == currentCounty
                          ? "#13CD93"
                          : "rgba(68,107,255,.55)",
                    },
                    itemStyle: {
                      color:
                        dataItem[0].name == currentCounty
                          ? "#13CD93"
                          : "rgba(68,107,255,.55)",
                    },
                    label: {
                      show: dataItem[0].name == currentCounty ? true : false,
                    },
                  };
                } catch {
                  console.log(dataItem[0]);
                }
              }),
            },
            //被攻击点
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 5,
              rippleEffect: {
                period: 10,
                color: "#0099FF",
                brushType: "stroke", //波纹绘制方式 stroke, fill
              },
              label: {
                normal: {
                  show: true,
                  position: "right", //显示位置
                  offset: [10, -5], //偏移设置
                  formatter: "{b}", //圆环显示文字
                  fontWeight: "normal",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 14,
                  color: "#fff",
                },
                emphasis: {
                  show: true,
                },
              },
              symbol: "circle",
              symbolSize: function (val) {
                // if (val===undefined){
                //   return 100
                // } else{
                //   return 4 + val[2] / 800; //圆环大小
                // }
                return 15;
              },
              itemStyle: {
                normal: {
                  show: true,
                  color: "#0099FF",
                },
                emphasis: {
                  show: false,
                },
              },
              data: item[1].map(function (dataItem) {
                try {
                  if (dataItem.length >= 1) {
                    return {
                      name: dataItem[1].name,
                      value:
                        dataItem[1].name == undefined
                          ? ""
                          : geoCoordMap[dataItem[1].name].concat([
                              dataItem[1].value,
                            ]),
                      rippleEffect: {
                        color:
                          dataItem[1].name == currentCounty
                            ? "#13CD93"
                            : "rgba(68,107,255,.55)",
                      },
                      itemStyle: {
                        color:
                          dataItem[1].name == currentCounty
                            ? "#13CD93"
                            : "rgba(68,107,255,.55)",
                        // color: dataItem[1].name == currentCounty ? '#19be6b' : '#0099FF'
                      },
                    };
                  } else {
                    return {
                      name: dataItem[0].name,
                      value:
                        dataItem[0].name == undefined
                          ? ""
                          : geoCoordMap[dataItem[0].name].concat([
                              dataItem[0].value,
                            ]),
                      rippleEffect: {
                        color:
                          dataItem[0].name == currentCounty
                            ? "#0099FF"
                            : "#19be6b",
                      },
                      itemStyle: {
                        color:
                          dataItem[0].name == currentCounty
                            ? "#0099FF"
                            : "#19be6b",
                      },
                    };
                  }
                } catch {
                  console.log(dataItem[1]);
                }
              }),
            }
          );
        });
        var option = {
          backgroundColor: "#1B2631",
          geo: {
            map: "world",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            roam: true, //是否允许缩放
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "180%",
            itemStyle: {
              normal: {
                color: "rgba(48,97,186,0.3)", //地图背景色
                borderColor: "#fff", //省市边界线
              },
              emphasis: {
                // color: 'rgba(37, 43, 61, .5)' //悬浮背景
                color: "rgba(0,153,252,.8)",
              },
            },
            regions: [
              {
                name: "China",
                itemStyle: {
                  areaColor: "rgba(0,153,252,.5)",
                  // borderColor:'rgba(58,100,255,0.6)',
                  // borderWidth:1
                },
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            ],
          },
          series: series,
        };

        this.dom = echarts.init(this.$refs.dom);
        this.dom.setOption(option);
        // on(window, "resize", this.resize);
      });
    },
  },
  mounted() {
    this.intChart();
  },
};
</script>
